<template>
	<view class="h-full p-3" style="color: #9FA6B5;">
		<view class="p-3" style="background-color: #242424;">
			<view class="text-md">{{$t('shiming.zhengshixingming')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;">
				<u--input :placeholder="$t('shiming.qsrzhengshixingming')" border="none" color="#fff"
					v-model="form.realname"></u--input>
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.chushengriqi')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;" @click="calendar.show=true">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="form.birthday" @maskClick="maskClick" />
				<!-- <view>{{$t('shiming.xuanzeriqi')}}</view> -->
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.zhengjianleixing')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;">
				<uni-data-select v-model="form.identification_type" :localdata="cardRange" @change="changeselect" :clear="false"></uni-data-select>
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.zhengjianhaoma')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;">
				<u--input :placeholder="$t('shiming.qsrzhengjianhaoma')" border="none" color="#fff"
					v-model="form.id_card"></u--input>
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.juzhudizhi')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;">
				<u--input :placeholder="$t('shiming.qsrjuzhudizhi')" border="none" color="#fff"
					v-model="form.address"></u--input>
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.guoji')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;" @click="selectPicker">
				{{nationa.list[0][nationa.defaultIndex].name}}
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md">{{$t('shiming.dianhuahaoma')}}</view>
			<view class="p-2 rounded-sm my-2" style="background-color: #000;">
				<u--input :placeholder="$t('shiming.qsrdianhuahaoma')" border="none" color="#fff"
					v-model="form.phone"></u--input>
			</view>
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="text-md text-white">1.{{$t('shiming.qsczjzmzp')}}</view>
			<view class="p-2 rounded-sm my-2 flex justify-between w-full" >
				<view class="p-6 rounded-lg flex justify-center items-center" style="background-color:#000; width: 200rpx;height: 100rpx;">
					<image src="/static/images/safe/fill6.png" style="width: 200rpx;height: 100rpx;"></image>
				</view>
				<view>
					<u-upload :fileList="upload.fileList" name="1" :maxCount="1" width="300rpx" height="200rpx"></u-upload>
				</view>
			</view>
			<view class="text-md text-white">2.{{$t('shiming.qsczjbeimian')}}</view>
			<view class="p-2 rounded-sm my-2 flex justify-between w-full" >
				<view class="p-6 rounded-lg flex justify-center items-center" style="background-color:#000; width: 200rpx;height: 100rpx;">
					<image src="/static/images/safe/fill7.png" style="width: 200rpx;height: 100rpx;"></image>
				</view>
				<view>
					<u-upload :fileList="upload.fileList" name="1" :maxCount="1" width="300rpx" height="200rpx"></u-upload>
				</view>
			</view>
			
			<view class="my-4">
				<u-gap height="1" bgColor="#3d3d50"></u-gap>
			</view>
			<view class="py-4">
				<u-button :text="$t('zhuanyi.queren')" shape="circle" @click="registerFn"></u-button>
			</view>
		</view>
		<!-- 国籍 -->
		<u-picker :defaultIndex="nationa.defaultIndex" :show="nationa.show" :columns="nationa.list" keyName="name" @cancel="nationa.show=false"
			@confirm="nationaAction" @close="nationa.show=false"></u-picker>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		data() {
			return {
				form: {
					realname: '', // 真实姓名
					birthday:'',// 日期
					identification_type: 0, // 证件类型
					id_card:'',// 证件号码
					address:'',// 居住地址
					country_code: '1', // 国籍
					phone: '', // 电话号码
					front_img:'',//正面
					front_img:'',//背面
				},
				cardRange:[// 证件类型
					{ value: 0, text: this.$t('shiming.jiashizheng') },
					{ value: 1, text: this.$t('shiming.huzhao') },
					{ value: 2, text: this.$t('shiming.shenfenzheng') },
				],
				nationa:{ // 国籍
					show: false,
					defaultIndex:[0],
					list:[[
						{name: '+971(United Arab Emirates)',id: '971'},
						{name: '+93(Afghanistan)',id: '93'},
						{name: '+1268(Antigua and Barbuda)',id: '1268'},
						{name: '+1264(Anguilla)',id: '1264'},
						{name: '+355(Albania)',id: '355'},
						{name: '+374(Armenia)',id: '374'},
					]]
				},
				// 上传
				upload:{
					fileList:[]
				},
				// 日历
				calendar:{
					show:false
				}
			}
		},
		onLoad(op) {},
		methods: {
			registerFn() {
				if (!this.form.email) {
					this.showMsg(this.$t('login.qingshuryx'))
					return
				}
				if (!this.agree[0]) {
					this.showMsg(this.$t('register.qingyuedubingtyxd'))
					return
				}
				if (!this.image) {
					this.showMsg(this.$t('register.tuxingyanzheng'))
					return
				}
				if (!this.code) {
					this.showMsg(this.$t('register.yanzhengma'))
					return
				}
				
			},
			showMsg(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},
			// 证件类型
			changeselect(){
				
			},
			// 国籍
			nationaAction(e){
				console.log(e);
				let id = e.value[0].id
				this.nationa.defaultIndex = e.indexs
				this.form.country_code = id
				this.nationa.show = false
			},
			// 选择国籍
			selectPicker(){
				this.nationa.show = true
			},
			// 选择日期
			calendarFn(){
				this.calendar.show=false
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-upload__button{
		background-color: #000!important;
	}
	::v-deep .u-popup__content{
		background-color: #fff!important;
	}

</style>